<template>
    <div class="page-content">
        <div class="d-flex">
            <edit-tree v-model="currentCategory" apiPrefix="/manager/device-model-category" :newFields="categoryFields" class="tree mr-4 p-4"
                @currentChange="selectCategory" title="模型"></edit-tree>

            <entity-manager apiPrefix="/manager/device-model" :fields="fields" :queryFields="queryFields" ref="entityManagerRef"
                class="flex-auto" :params="params" :withNew="false" operationsWidth="200px">
                <template #buttons>
                    <el-button type="primary" icon="plus" @click="newItem">新增</el-button>
                    <!-- <el-button type="primary" @click="showImport">导入</el-button> -->
                </template>

                <template #rowButtons="{ row }">
                    <el-link type="danger" v-show="row.status == 1 || row.status == 2" class="mr-2" @click="offline(row)"
                        v-perm="'update'">下线</el-link>
                    <el-link type="success" v-show="row.status == 0 || row.status == 3 || row.status == 2" class="mr-2"
                        @click="publish(row)" v-perm="'update'">发布</el-link>
                    <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">详情</el-link>
                    <el-link type="danger" v-show="!row.isSuperAdmin" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
                </template>
            </entity-manager>
        </div>

        <full-panel v-model="visible" title="模型详情" @close="visible = false">
            <new-model @close="visible = false" :item="editingRow" :category="currentCategory" @change="editChanged"/>
        </full-panel>

        <el-dialog v-model="importVisible" title="模型导入">
            <ImportData/>
        </el-dialog>
    </div>
</template>

<script setup>
    import EditTree from '@/components/edit-tree/index.vue'
    import { ElMessage } from 'element-plus';
    import fullPanel from '@/components/full-panel.vue'
    import newModel from './new.vue'
    import * as _ from 'lodash'
    import https from '@/utils/https'
import ImportData from './import-data.vue';

    const categoryFields = [
        { label: '分类名称', prop: 'name', required: true }
    ]
    const fields = [
        { label: '模型名称', prop: 'name', required: true, width: '200px' },
        {
            label: '状态', prop: 'status', width: '80px', converter: val => {
                if (!val) {
                    return '草稿'
                } else if (val == 1) {
                    return '已发布'
                } else if (val == 2) {
                    return '编辑中'
                } else {
                    return '已下线'
                }
            },
            needNew: false
        },
        { label: '离线检测周期（S）', prop: 'offlineDetection', width: '140px', default: 60 },
        { label: '备注', prop: 'remark', type: 'textarea' },
        { label: '创建时间', prop: 'createTime', width: '200px', needNew: false },
    ]
    const entityManagerRef = ref()
    const params = ref({})
    const queryFields = [
        { label: '模型名称', prop: 'name' },
    ]
    const visible = ref(false)
    const editingRow = ref()
    const currentCategory = ref({})

    function goEdit(row) {
        editingRow.value = row
        visible.value = true
    }

    function doDelete(row) {
        entityManagerRef.value.doDelete(row)
    }

    function editChanged() {
        editingRow.value.status = 2
    }

    function publish(row) {
        https.get('/manager/device-model/publish', {id: row.id}).then(resp => {
            ElMessage.success('操作成功')
            row.status = 1
        })
    }

    function offline(row) {
        https.get('/manager/device-model/offline', {id: row.id}).then(resp => {
            ElMessage.success('操作成功')
            row.status = 3
        })
    }

    function selectCategory(category) {
        params.value.categoryId = category.id
        entityManagerRef.value.reload()
    }

    function newItem() {
        editingRow.value = null
        visible.value = true
    }

    const importVisible = ref(false)
    function showImport() {
        importVisible.value = true
    }
</script>

<style lang="scss" scoped>
    .tree {
        width: 300px;
        height: calc(100vh - 120px)
    }
</style>